<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fetch express</title>
  <link type="text/css" rel="stylesheet" href="./css/base.css">
  <link type="text/css" rel="stylesheet" href="./css/fetchExp.css">
</head>
<body>
  <div class="full-container">
    <div class="current-exp-container">
      <h3>运单号</h3>
      <div class="current-exp clearfix">
        <div class="current-exp-wrapper float-l">
          <input id="exp-code" type="text" placeholder="手动输入运单号">
          <a id="exp-control" class="control-btn">
            <img src="./img/clear.png" alt="">
          </a>
        </div>
        <a id="add-exp" class="add-btn float-r">添 加</a>
      </div>
    </div>
    <div class="content">
      <!-- <div class="content-wrapper">
        <div class="exp-bar clearfix">
          <input type="text" class="exp float-l" value="1234567890">
          <a class="control-btn float-r trash-btn">
            <img src="./img/trash.png" alt="">
          </a>
          <a class="control-btn float-r modify-btn">
            <img src="./img/input.png" alt="">
          </a>
        </div>
      </div> -->
    </div>
    <div class="footer">
      <div class="footer-wrapper clearfix">
        <a id="continue-pick" class="btn float-l">继续代取</a><a id="get-out" class="btn float-r">扫码出闸</a>
      </div>
    </div>
  </div>
</body>
</html>
<script>
  var exp_code = document.getElementById("exp-code"),
      exp_control = document.getElementById("exp-control"),
      add_exp = document.getElementById("add-exp"),
      content = document.getElementsByClassName("content")[0],
      continue_pick = document.getElementById("continue-pick"),
      get_out = document.getElementById("get-out");

  // 输入运单号显示delete按钮，激活添加按钮
  exp_code.oninput = inputExp
  function inputExp(){
    if (exp_code.value) {
      exp_control.style.display = "block";
      exp_code.classList.add("active");
      add_exp.classList.add("active");
      add_exp.addEventListener("click",addExp)
    } else {
      exp_control.style.display = "none";
      exp_code.classList.remove("active");
      add_exp.classList.remove("active");
      add_exp.removeEventListener("click",addExp)
    }
  }

  // 点击delete按钮，清空input框
  exp_control.onclick = clearInput
  function clearInput(){
    exp_code.value = '';
    exp_control.style.display = "none"
    inputExp()
  }

  // 模拟扫描数据
  var exp_code_scan = "88888888"

  addExp()

  // 点击添加按钮，将当前运单号加到list
  var content_wrapper;
  function addExp(){
    // console.log(content_wrapper)
    var code = exp_code.value.trim() || exp_code_scan
    console.log("添加运单号", code)
    if (content_wrapper) {
      // 直接生成exp-bar
      appendExp(code)
    } else {
      // 如果没有content_wrapper，生成content_wrapper
      var div = document.createElement("div")
      content.appendChild(div);
      div.outerHTML = `<div class=\"content-wrapper\"></div>`;
      content_wrapper = document.getElementsByClassName("content-wrapper")[0];
      appendExp(code)
    }
  }

  var expNodeList, reqExpArr, reqExpStr;
  function appendExp(code){
    if (reqExpArr && reqExpArr.indexOf(code) > -1) {
      // exp-code去重
      alert("已经添加过当前包裹");
      exp_code.select();
      return false
    } else {
      reqExpArr = [];
      reqExpStr = '';
      var div = document.createElement("div")
      content_wrapper.appendChild(div);
      div.outerHTML = `<div class="exp-bar clearfix">
            <input type="text" class="exp float-l" value="${code}">
            <a class="control-btn float-r trash-btn">
              <img src="./img/trash.png" alt="">
            </a>
            <a class="control-btn float-r modify-btn">
              <img src="./img/input.png" alt="">
            </a>
          </div>`
      console.log(content_wrapper.children)
      clearInput()

      expNodeList = content_wrapper.children;
      for(i = 0;i < expNodeList.length;i ++){
        // 将list中的exp-code添加到reqExpArr
        reqExpArr.push(expNodeList[i].getElementsByClassName("exp")[0].value);

        // 给每一个exp-bar添加修改、blur和删除事件
        expNodeList[i].getElementsByClassName("trash-btn")[0].onclick = deleteExp.bind(expNodeList[i], i);
        expNodeList[i].getElementsByClassName("modify-btn")[0].onclick = modifyExp.bind(expNodeList[i]);
        expNodeList[i].getElementsByClassName("exp")[0].onfocus = modifyExp.bind(expNodeList[i]);
        expNodeList[i].getElementsByClassName("exp")[0].onblur = completeModify
      }
      reqExpStr = reqExpArr.join(",");
      console.log(reqExpStr)
    }
  }

  // 删除exp-bar
  function deleteExp(ind){
    reqExpArr = [];
    reqExpStr = '';
    console.group('delete exp')
    console.log(ind)
    console.log(this)
    console.groupEnd()
    
    if (expNodeList.length == 1) {
      // 如果只剩下一个exp-bar，将content_wrapper也删除掉
      // content.removeChild() // .removeChild()必须有节点参数
      content_wrapper.remove()
      content_wrapper = undefined
    } else {
      // 删除当前的exp-bar
      content_wrapper.removeChild(this)
      // 将list中的剩余的exp-code添加到reqExpArr
      expNodeList = content_wrapper.children;
      for(i = 0;i < expNodeList.length;i ++){
        reqExpArr.push(expNodeList[i].getElementsByClassName("exp")[0].value);
      }
    }
    reqExpStr = reqExpArr.join(",");
    console.log(reqExpStr)
  }

  // 修改exp
  //    记录修改前的exp-code，防止修改为已经存在的其他exp-code
  var lastExpCode;
  function modifyExp(){
    console.log(this)
    var input = this.getElementsByClassName("exp")[0];
    lastExpCode = input.value;
    console.log('lastExpCode', lastExpCode)
    // console.log(input)
    input.select()
  }

  // 完成exp修改
  function completeModify(){
    console.group('complete modify')
    console.log(this)
    console.log('before modify', reqExpArr)
    var val = this.value.trim();
    // exp-code去重
    if (val == lastExpCode){
      this.value = lastExpCode;
      console.log(reqExpStr)
      console.groupEnd()
      return false
    } else if (reqExpArr.indexOf(val) > -1){
      alert("已经添加过当前包裹");
      // 重新将当前exp-code重置为lastExpCode
      this.value = lastExpCode;
      console.log(reqExpStr)
      console.groupEnd()
      return false
    }
    reqExpArr = [];
    reqExpStr = '';
    // 重新将list中的exp-code添加到reqExpArr
    expNodeList = content_wrapper.children;
    for(i = 0;i < expNodeList.length;i ++){
      reqExpArr.push(expNodeList[i].getElementsByClassName("exp")[0].value);
    }
    reqExpStr = reqExpArr.join(",");
    console.log('after modify', reqExpArr)
    console.log(reqExpStr)
    console.groupEnd()
  }
</script>